<template>
  <div class="new-lark-note-modal-wrapper">
    <a-modal v-model:open="topLevelOperationStore.isNewLarkNoteOpen" title="新建飞书同步笔记">
      <a-form :model="formState">
        <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]">
          <a-radio-group v-model:value="formState.type">
            <a-radio-button value="FOLDER">目录</a-radio-button>
            <a-radio-button value="DOCUMENT">文档</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :label="`飞书${larkNoteTypeName} Token`"
          name="token"
          :rules="[{ required: true, message: `请输入飞书${larkNoteTypeName} Token` }]"
        >
          <a-input v-model:value="formState.token" :placeholder="`请输入飞书${larkNoteTypeName} Token`" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="topLevelOperationStore.closeNewLarkNote()">取消</a-button>
        <a-button type="primary" :loading="okLoading" @click="getLarkNote">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { useTopLevelOperationStore } from '@/plugins/pinia/store/top-level-operation';
import { useNoteApi } from '@/api/note/mods';

const topLevelOperationStore = useTopLevelOperationStore();
const { noteApi } = useNoteApi();

declare type LarkNoteType = 'FOLDER' | 'DOCUMENT';
const formState = ref<{ type: LarkNoteType; token?: string }>({ type: 'FOLDER' });
const larkNoteTypeName = computed(() => {
  return formState.value.type == 'FOLDER' ? '目录' : '文档';
});

const okLoading = ref(false);
const getLarkNote = () => {
  // TODO 校验表单、飞书文档类型的笔记
  if (formState.value.token && topLevelOperationStore.newLarkNoteParentNoteId) {
    if (formState.value.type == 'FOLDER') {
      okLoading.value = true;
      noteApi.note
        .createLarkFolderNote(Number(topLevelOperationStore.newLarkNoteParentNoteId), formState.value.token)
        .then(data => {
          okLoading.value = false;
          topLevelOperationStore.closeNewLarkNote();
          console.log('data =', data);
        })
        .catch(e => {
          okLoading.value = false;
          console.log('e =', e);
        });
    } else if (formState.value.type == 'DOCUMENT') {
      console.log('formState.value.token =', formState.value.token);
    }
  }
};
</script>
